<template>
  <div class="view-container">
<div class="wrapper"></div>
<div class="wrapper-white">
  <span class="top-Title">平台概述</span>
  <div scroll-x="true" style="width: 100%;overflow-x:auto">
    <div class="scroll-view-item">
      <div class="wrapper-white-view">
        <div  v-for="(item, index) in overviewArr" :key="index" class="wow fadeInRight"
         data-wow-duration="0.5s" :data-wow-delay="index/3+'s'">
          <div class="wrapper-backView" >
            <div class="wrapper-white-url">
              <van-image width="100%" height="100%" fit="cover" :src="item.url" />
            </div>
            <div class="wrapper-white-txt">{{item.text}}</div>
            <div class="wrapper-white-img">
              <van-image width="100%" height="100%" fit="cover" :src="item.img" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="system-white">
  <span class="top-Title system-title">平台概述</span>
  <span class="system-sub"> 物联化、智能化和互联化是基础，它将物联网、计算、大数据、移动互联等技术与传统工业深度融合，让纺织生产更节能、更环保、安全，管理更加方便便捷。</span>
  <div scroll-x="true" style="width: 100%;overflow-x:auto">
    <div class="system-view-item">
      <van-image width="100%" height="100%" fit="cover" src="https://oss.cloudcpc.com/fca5d82bf06730669c5ffe85a51e8063.png" />
    </div>
  </div>
</div>
<div class="interflow-wrapper">
  <span class="top-Title system-title">互通互联 高效运作</span>
  <span class="system-sub"> 随时随地都可以协同，每时每刻都可以共享。<br/>同时，工业云能够拉动工业产业链上下游整合，形成<br/>互通互联的高效运作的设计制造生态，促进生产性<br/>服务业的繁荣和发展。</span>
  <div class="interflow-view-item">
      <van-image width="100%" height="100%" fit="cover" src="https://oss.cloudcpc.com/6bb66151f9e7317bb892ad1b685eda4d.png" />
    </div>
</div>
<div class="value-wrapper">
  <span class="top-Title system-title">价值与目标</span>
  <span class="system-sub">生产设备运行状态实时掌握、技术和经济问题预警、纺织工艺专家诊断&建议、节能减排技术改造、全生命周期售后、运行人员绩效考核、核心数据行业对标、年度/月 度运行报告等服务。</span>
  <div class="scroll-view" scroll-x="true" style="width: 100%;overflow-x:auto">
    <div class="value-view-item">
      <van-image width="100%" height="100%" fit="cover" src="https://oss.cloudcpc.com/21a366f73944370ea0692b57ca35caa1.png" />
    </div>
  </div>
  <div class="wow fadeInUp" v-for="(item, index) in value" :key="index">
    <div class="value-list">
      <div class="value-img">
      <van-image width="100%" height="100%" fit="cover" :src="item.url" />
    </div>
    <span class="value-list-txt">{{item.sub}}</span>
    </div>
  </div>
</div>
  </div>
</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'

export default {
  
 data() {
    return {
    overviewArr:[
      {
        url:'https://oss.cloudcpc.com/98f693b9e78e3370b80c22d24419bf16.png',
        img:'https://oss.cloudcpc.com/5f1764ec255f3a5184f3af9f92868ef0.png',
        text:'将中心研发的数据采集服务器采集的现场基于PLC或DCS系统的数据，通过网络传输到云端的智能分析中心实时数据库',
      },
      {
        url:'https://oss.cloudcpc.com/7a1c14d55aac3a239204a4f0c6682a61.png',
        img:'https://oss.cloudcpc.com/202e04dfd5753449accaabb98b680d8f.png',
        text:'通过WEB端和APP端进行展示，使用户方便快捷的掌握工厂信息的同时，快速、准确的做出判断与决策提高综合资源利用效率',
      },
      {
        url:'https://oss.cloudcpc.com/6013a77e34543569b426ac02d5ad88b1.png',
        img:'https://oss.cloudcpc.com/c368db3befc533e586c03d26d61bfaf8.png',
        text:'配合纺织工艺专家系统（纺纱专家、染色专家等），结合各道工序的主力机型，对每道工序上与工艺相关的参数进行分析，不断优化工艺流程',
      }
    ],
    value:[{
      url:'https://oss.cloudcpc.com/6369a8f8696b33a28d27c694defebc96.png',
      sub: '纺智云降低企业信息化建设和使用的总成本；使用维护可靠便捷；服务专业到位。',
    },
    {
      url:'https://oss.cloudcpc.com/3983c46886833572ba973e35704ea8a5.png',
      sub: '纺智云提供企业的多种创新协同工具和手段；促进企业、行业的知识积累；促进产业上下游价值链协同；促进从仿造、仿创到自主创新，建立创新体系。',
    },
    {
      url:'https://oss.cloudcpc.com/957f691292c031418879cc520d96d739.png',
      sub: '纺智云为纺织企业提供工业软件产品、解决方案和服务，贯通企业营销、设计、生产、采购以及服务全流程，能提高沟通协同效率、共享资源服务，从而有效提升企业竞争能力。',
    }
    ],
    }},
  mounted() {
    const { fullPath } = this.$route

    this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })

    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
  },


  methods: {}
}
</script>
<style lang="scss" scoped>
@import './index';
</style>
